<template>
  <div class="content">
    <el-tabs v-model="activeName" type="card">
      <!-- 流水概括 -->
      <el-tab-pane label="基本信息" name="first">
        <!-- 第一张卡片 -->
        <el-card shadow="hover" class="first-card">
          <el-form ref="form">
            <h3>基本资料</h3>
            <el-row>
              <el-col :span="8">
                <p>销售员姓名</p>
                <el-input v-model="agentQueryBase.real_name" :readonly="true" />
              </el-col>
              <el-col :span="8">
                <p>联系方式</p>
                <el-input v-model="agentQueryBase.get_wechat_info.telephone" :readonly="true" />
              </el-col>
              <el-col :span="8">
                <p>累计销售额</p>
                <el-input v-model="sale" :readonly="true" />
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <p>绑定日期</p>
                <el-input v-model="agentQueryBase.created_at" :readonly="true" />
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <!-- 第二张卡片 -->
        <el-card shadow="hover" class="second-card">
          <h3>佣金设置</h3>
          <p>
            门票商品佣金比例
            <span>（每 100 元预计得到 n 元佣金 ）</span>
          </p>
          <div class="slider">
            <el-slider v-model="profitValue" :max="1000" :min="0" :step="0.01" show-input />
            <el-button type="primary" plain @click="setAgentProfit">设置</el-button>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="销售记录" name="second">
        暂无销售记录
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getAgentQuery, setAgentProfit } from '@/api/smallProgram'
export default {
  name: 'SmallProgramDetails',
  data() {
    return {
      activeName: 'first',
      agentQueryBase: {
        get_wechat_info: {}
      },
      sale: '暂无该字段',
      profitValue: 0
    }
  },
  created() {
    this.getAgentQuery()
  },
  methods: {
    getAgentQuery() {
      getAgentQuery(this.$route.query.uid).then((res) => {
        this.agentQueryBase = res.data.data.base
        this.profitValue = this.agentQueryBase.profit
        if (this.agentQueryBase.get_wechat_info.telephone === null) {
          this.agentQueryBase.get_wechat_info.telephone = '电话为空'
        }
        console.log(this.agentQueryBase)
      })
    },
    setAgentProfit() {
      const query = {
        wechat_user_uid: this.$route.query.uid,
        profit: this.profitValue
      }
      setAgentProfit(query).then(res => {
        if (res.data.code === 200) {
          this.$message({
            message: '设置成功',
            duration: 1500,
            showClose: true,
            type: 'success'
          })
          this.getAgentQuery()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  padding: 24px;
}
.first-card {
  width: 100%;
  display: inline-block;
  border: 1px solid #dcdfe6;
  font-size: 12px;
  text-align: center;
  .el-form {
    width: 100%;
    height: 100%;
  }
  h3 {
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
  }
  p {
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    margin-top: 24px;
  }
  .el-input {
    margin-top: 24px;
    width: calc(100% - 40px);
    float: left;
  }
}
.second-card {
  width: 100%;
  display: inline-block;
  border: 1px solid #dcdfe6;
  font-size: 12px;
  text-align: center;
  margin-top: 39px;
  h3 {
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
  }
  p {
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    margin-top: 24px;
    span {
      font-size: 14px;
      color: #909399;
      font-weight: normal;
    }
  }
}
.slider {
  width: 50%;
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  margin-bottom: 16px;
  .el-slider {
    width: 80%;
  }
}
.el-col {
  padding-left: 28px;
  padding-right: 28px;
  margin-bottom: 24px;
  p {
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    margin-top: 24px;
  }
  .el-input {
    margin-top: 24px;
  }
  .el-select {
    margin-top: 24px;
    width: 100%;
  }
}
</style>
